<template>
  <div class="app-container">
    <div class="left-box" :style="{ height: tableHeight + 104 + 'px' }">
      <xh-area @select="handleNodeClick"></xh-area>
    </div>
    <div class="right-box">
      <xh-list-head
        @on-search="handleSearch"
        ref="TableHead"
        crmType="path"
        canSave
        :showdate="false"
        :options="selectOpt"
        :fielname="fielname"
        :listHander="listHander"
        placeholder="请输入点检项名称"
        @handleCreate="isCreate = true"
      />
      <el-table
        v-loading="listLoading"
        :data="tableData"
        element-loading-text="加载中"
        :height="tableHeight"
        use-virtual
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column label="ID" align="center" fixed="left">
          <template slot-scope="scope">
            {{ scope.row.itemid }}
          </template>
        </el-table-column>
        <el-table-column
          label="点检项名称"
          min-width="150"
          align="center"
          fixed="left"
        >
          <template slot-scope="scope">
            <div
              class="can-visit--underline"
              @click="handleEdit(scope.row, 'read')"
            >
              {{ scope.row.itemname }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="区域" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.zonename }}
          </template>
        </el-table-column>
        <el-table-column label="执行周期" min-width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.period }}</span>
          </template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          label="状态"
          min-width="140"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.itemstatus | statusFilter">{{
              scope.row.itemstatus | formatItemStatus
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row, 'update')"
              class="xm-btn--primary"
              type="primary"
              >编辑</el-button
            >
            <el-button
              size="mini"
              @click="deleteEvent(scope.$index, scope.row)"
              class="xm-btn--red"
              type="primary"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新建 -->
    <path-item-create
      :visible="isCreate"
      @close="close"
      :detail="detailData"
      :action="action"
    />
  </div>
</template>

<script>
import TableMixin from "../mixins/Table";
import XhArea from "@/components/XhArea";
import XhListHead from "@/components/XhListHead/index.vue";
import { getPathItemAPI, deletePathItemAPI } from "@/api/pathLine";
import pathItemCreate from "./Create";
export default {
  name: "PathLine",

  data() {
    return {
      list: null,
      listLoading: true,

      //状态
      selectOpt: [
        { value: null, label: "全部" },
        { value: "0", label: "禁用" },
        { value: "1", label: "启用" },
      ],

      /**新建 */
      isCreate: false,
      detailData: {},
      action: {
        type: "save",
        data: {},
      },

      //导出
      fielname: "点检项",
      listHander: {
        itemname: "点检项名称",
        zonename: "区域",
        period: "执行周期",
        itemstatus: "状态",
      },
    };
  },
  mixins: [TableMixin],

  filters: {
    formatItemStatus(status) {
      const statusMap = {
        1: "启用",
        0: "禁用",
      };
      return statusMap[status];
    },
  },

  components: {
    XhListHead,
    XhArea,
    pathItemCreate,
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
    });
  },

  methods: {
    refresh() {
      this.action = {
        type: "save",
        data: {},
      };
      this.isCreate = false;
      this.getList(this.search);
    },
    /** tableData */
    getList(search) {
      this.listLoading = true;
      if (search && search.hasOwnProperty("dutystatus")) {
        search.itemstatus = search.dutystatus;
        delete search.dutystatus;
      }
      if (search && search.hasOwnProperty("keyword")) {
        search.keywords = search.keyword;
        delete search.keyword;
      }
      getPathItemAPI({
        pagenum: this.currentPage - 1,
        pagesize: this.pageSize,
        ...search,
      })
        .then((res) => {
          this.tableData = res.Data;
          this.total = res.Total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    //tree
    handleNodeClick(data) {
      if (data.Zoneid) {
        this.search.zoneid = data.Zoneid;
      } else {
        delete this.search.zoneid;
      }

      this.getList(this.search);
    },

    /**删除点检项 */
    deleteEvent(index, item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePathItemAPI({ itemid: item.itemid }).then((res) => {
            this.getList(this.search);
            this.$message.success("删除成功");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /**编辑*/
    handleEdit(item, type) {
      this.detailData = Object.assign({}, item);
      this.isCreate = true;
      this.$set(this.action, "type", type);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left-box {
    width: 260px;
    height: 100%;
    background: #ffffff;
    margin-right: 10px;
  }
  .right-box {
    width: calc(100% - 260px);
  }
}
</style>